<template>
  <z-modal
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="公司名称" prop = "companyName" >
              <a-input v-model.trim="form.companyName" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="公司网址" prop = "url" >
              <a-input v-model.trim="form.url" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="公司logo图片地址" prop = "logo" >
              <a-input v-model.trim="form.logo" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-upload
                :class="{'disabled-upload':disableSubmit}"
                :action="uploadAction"
                :multiple="false"
                :file-list="fileList"
                :headers="headers"
                :beforeUpload="beforeUpload"
                list-type="picture-card"
                @change="handleChange"
            >
              <a-button> <a-icon type="upload" /> Upload </a-button>
            </a-upload>
          </a-col>
          <a-col :span="23" >
            <a-form-model-item :labelCol="{ span: 4/2 }"  :wrapperCol="{ span: 21 }" label="公司简介">
              <a-input :disabled="disableSubmit" type="textarea" v-model="form.introduction"/>
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import {Upload as AUpload} from 'ant-design-vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'
export default {
  name: 'EcardCompanyModal',
  components: { ZDictSelectTag,AUpload },
  mixins: [ModalFormMixin],
  data() {
    return {
      validatorRules: {
        companyName: [{ required: true, message: '请输入公司名称' }],
        url: [{ required: true, message: '请输入公司网址' }],
        logo: [{ required: true, message: '请输入公司logo地址' }]
      },
      url: {
        add: '/ecard/company/v1/add',
        edit: '/ecard/company/v1/edit'
      },
      fileList: [],
      uploadAction: process.env.VUE_APP_API_BASE_URL + '/common/v1/upload',
      headers: {}
    }
  },
  methods:{
    handleChange(info) {
      let fileList = info.fileList

      if (info.file.status === 'done') {
        if (info.file.response.success) {
          fileList = fileList.map((file) => {
            if (file.response) {
              file.url = file.response.result.url[0]
              console.log("url>>>>"+file.url)
              this.form.logo = file.url;
            }
            return file
          })
        }
      } else if (info.file.status === 'error') {
        this.$message.error('上传失败')
      }
      else{
        fileList = fileList.slice(0,1)
      }
      this.fileList = fileList;
    },
    beforeUpload(file){
      this.headers[ACCESS_TOKEN] = this.token
      if(this.fileList.length>0){
        this.$message.error('只能上传一张')
        return false
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.headers[ACCESS_TOKEN] = this.token
  }

}
</script>

<style lang="less">
.disabled-upload {
  .ant-upload-select-picture-card{
    display: none
  }
}
</style>
